<script setup>
import { reactive, watch, onMounted, onBeforeMount } from "vue";
import api from "@/api";
import devicePic from '@/assets/images/ibe/device-pic.png'
import LivePlayer from "@liveqing/liveplayer-v3"

const props = defineProps({
  machineCode: String,
})

const emit = defineEmits(['close'])

const partyInfo = reactive({
  machineType: '',//设备名称
  buildingNo: '',//服务楼栋
  serialNumber: '',//设备编号
  uDepartment: '',//使用单位
  uContact: '',//使用单位联系人
  uPhoneNumber: '',//使用单位电话
  setDepartment: '',//安装单位
  setContact: '',//安装单位联系人
  setPhoneNumber: '',//安装单位联系人
  liveStreamUrl: '',//视频流
  equipmentManufacturer: '',//制造单位
  license: '',//许可证号
  ageOfInstallation: '4年',
})

const devicestat = reactive({
  maintenDepartment: '',//维保单位
  maintenContact: '',//联系人
  maintenPhoneNumber: '',//维保单位联系电话
});

const leaseInfo = reactive({
  leaseDepartment: '',//租赁单位
  leaseContact: '',//联系人
  leasePhoneNumber: '',//联系人电话
})

const initData = () => {
  api.machinery.getMachineInfosBySerialNumber(
    { "serialNumber": props.machineCode }
  ).then(res => {
    let data = res.data[0].machineInfo[0];
    partyInfo.machineType = res.data[0].machineType;
    //服务楼栋
    partyInfo.serialNumber = res.data[0].serialNumber;
    partyInfo.uDepartment = data.uDepartment;
    partyInfo.uContact = data.uContact;
    partyInfo.uPhoneNumber = data.uPhoneNumber;
    partyInfo.setDepartment = data.setDepartment;
    partyInfo.buildingNo = data.buildingNo.toString() + '#'
    partyInfo.liveStreamUrl = data.livestreamUrl;
    if (partyInfo.liveStreamUrl == 'NA') partyInfo.liveStreamUrl = ""
    //安装日期
    partyInfo.setContact = data.setContact;
    partyInfo.setPhoneNumber = data.setPhoneNumber;
    //制造单位
    partyInfo.equipmentManufacturer = data.equipmentManufacturer;
    partyInfo.license = data.license;
    //安装时机龄
    //partyInfo.ageOfInstallation = '4年';
    devicestat.maintenDepartment = data.maintenDepartment;
    devicestat.maintenContact = data.maintenContact;
    devicestat.maintenPhoneNumber = data.maintenPhoneNumber;

    leaseInfo.leaseDepartment = data.leaseDepartment;
    leaseInfo.leaseContact = data.leaseContact;
    leaseInfo.leasePhoneNumber = data.leasePhoneNumber;
  })
}

const handleClose = () => {
  emit('close')
}

onBeforeMount(() => {
})

onMounted(() => {
  initData();
});

watch(
  () => props.machineCode,
  (newVal, oldVal) => {
    initData();
  }
)


</script>

<template>
  <div class="deviceDetails">
    <div class="title">设备详情</div>
    <div class="deviceDetails-content">
      <div class="deviceDetails-l">
        <div class="party-info">
          <div class="party-info-title">
            <span>参与方信息</span>
          </div>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="设备名称" label-align="center" align="center" label-class-name="label"
              class-name="firstCloumn">{{ partyInfo.machineType }}</el-descriptions-item>
            <el-descriptions-item label="服务楼栋号" label-align="center" align="center" label-class-name="label"
              class-name="secondCloumn">{{
                partyInfo.buildingNo
              }}</el-descriptions-item>
            <el-descriptions-item label="设备编号" label-align="center" align="center" label-class-name="label"
              class-name="thirdCloumn">{{
                partyInfo.serialNumber
              }}</el-descriptions-item>

            <el-descriptions-item label="使用单位" label-align="center" align="center" label-class-name="label"
              class-name="firstCloumn">{{ partyInfo.uDepartment }}</el-descriptions-item>
            <el-descriptions-item label="使用联系人" label-align="center" align="center" label-class-name="label"
              class-name="secondCloumn">{{
                partyInfo.uContact
              }}</el-descriptions-item>
            <el-descriptions-item label="使用单位电话" label-align="center" align="center" label-class-name="label"
              class-name="thirdCloumn">{{ partyInfo.uPhoneNumber
              }}</el-descriptions-item>

            <el-descriptions-item label="安装单位" label-align="center" align="center" label-class-name="label"
              class-name="firstCloumn">{{ partyInfo.setDepartment }}</el-descriptions-item>
            <el-descriptions-item label="安装单位联系人" label-align="center" align="center" label-class-name="label"
              class-name="secondCloumn">{{
                partyInfo.setContact
              }}</el-descriptions-item>
            <el-descriptions-item label="安装单位电话" label-align="center" align="center" class-name="thirdCloumn"
              label-class-name="label">{{ partyInfo.setPhoneNumber
              }}</el-descriptions-item>

            <el-descriptions-item label="制造厂家" label-align="center" align="center" label-class-name="label"
              class-name="firstCloumn">{{
                partyInfo.equipmentManufacturer
              }}</el-descriptions-item>
            <el-descriptions-item label="许可证编号" label-align="center" align="center" label-class-name="label"
              class-name="secondCloumn">{{
                partyInfo.license
              }}</el-descriptions-item>
            <el-descriptions-item label="安装时机龄" label-align="center" align="center" label-class-name="label"
              class-name="thirdCloumn">{{
                partyInfo.ageOfInstallation
              }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="device-status">
          <div class="device-status-title">
            <span>设备状态</span>
          </div>
          <div class="device-status-grid">
            <el-descriptions :column="3" border>
              <el-descriptions-item label="维保单位" label-align="center" align="center" label-class-name="label"
                class-name="firstCloumn">{{ devicestat.maintenDepartment }}</el-descriptions-item>
              <el-descriptions-item label="维保单位联系人" label-align="center" align="center" label-class-name="label"
                class-name="secondCloumn">{{
                  devicestat.maintenContact
                }}</el-descriptions-item>
              <el-descriptions-item label="维保单位电话" label-align="center" align="center" label-class-name="label"
                class-name="thirdCloumn">{{
                  devicestat.maintenPhoneNumber
                }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div class="lease-info">
          <div class="lease-info-title">
            <span>租赁信息</span>
          </div>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="租赁单位" label-align="center" align="center" label-class-name="leaseLabel"
              class-name="leaseCloumn">{{ leaseInfo.leaseDepartment }}</el-descriptions-item>
            <el-descriptions-item label="联系人" label-align="center" align="center" label-class-name="leaseLabel"
              class-name="leaseCloumn">{{
                leaseInfo.leaseContact
              }}</el-descriptions-item>

            <el-descriptions-item label="联系电话" label-align="center" align="center" label-class-name="leaseLabel"
              class-name="leaseCloumn">{{ leaseInfo.leasePhoneNumber }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="deviceDetails-r">
        <div class="device-pic">
          <div class="device-pic-title">
            <span>设备照片</span>
          </div>
          <el-image style="width: 100%; height: 200px" :src="devicePic" fit="contain" />
        </div>
        <div class="device-video">
          <div class="device-video-title">
            <span>设备视频</span>
          </div>
          <div class="live-container">
            <LivePlayer :videoUrl="partyInfo.liveStreamUrl" aspect="fullscreen" stretch live />
          </div>
        </div>
      </div>
    </div>
    <div class="close" @click="handleClose"></div>

  </div>
</template>


<style lang="scss" scoped>
.deviceDetails {
  width: 1400px;
  height: 570px;
  font-family: SourceHanSansSC;
  padding: 10px 20px;
  box-sizing: border-box;
  color: #656565;

  .title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    font-size: 16px;
    color: #6E91FB;
  }

  .deviceDetails-content {
    width: 100%;
    display: flex;

    .deviceDetails-l {
      width: calc(100% - 400px);

      .party-info {
        width: 100%;

        .party-info-title {
          width: 200px;
          height: 20px;
          border-left: 3px #8f93f7 solid;
          font-weight: bold;
          padding-left: 10px;
          margin: 10px 0px;
        }
      }

      .device-status {
        width: 100%;

        .device-status-title {
          width: 200px;
          height: 20px;
          border-left: 3px #8f93f7 solid;
          font-weight: bold;
          padding-left: 10px;
          margin: 10px 0px;
        }

        .device-status-grid {
          width: 100%;
        }
      }

      .lease-info {
        width: 40%;

        .lease-info-title {
          width: 200px;
          height: 20px;
          border-left: 3px #8f93f7 solid;
          font-weight: bold;
          padding-left: 10px;
          margin: 10px 0px;
        }
      }
    }

    .deviceDetails-r {
      width: 390px;
      margin-left: 10px;

      .device-pic {
        width: 100%;

        .device-pic-title {
          width: 200px;
          height: 20px;
          border-left: 3px #8f93f7 solid;
          font-weight: bold;
          padding-left: 10px;
          margin: 10px 0px;
        }
      }

      .device-video {
        width: 100%;

        .device-video-title {
          width: 200px;
          height: 20px;
          border-left: 3px #8f93f7 solid;
          font-weight: bold;
          padding-left: 10px;
          margin: 10px 0px;
        }

        .live-container {
          width: 90%;
          height: 200px;
          position: relative;
          margin: auto;

          video {
            width: 100%;
            height: 100%;
          }

          :deep .webrtc {
            .webRtcPlayerBox {
              height: 260px !important;
            }
          }
        }
      }
    }
  }

  .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("@/assets/images/ibe/close.png");
    cursor: pointer;
  }
}

:deep .el-descriptions {
  .label {
    width: 130px;
  }

  .firstCloumn {
    width: 240px !important;
  }

  .secondCloumn {
    width: 160px !important;
  }

  .thirdCloumn {
    width: 131px !important;
  }

  .leaseLabel{
    width: 116px;
  }

  .leaseCloumn{
    width: 214px !important;
  }

  .el-descriptions__label.el-descriptions__cell.is-bordered-label {
    background: #f6f6fd;
    border: none;
  }
}</style>
